<template>
	<van-popup v-model:show="other.isShow" class="w-full" style="height: 100%" position="right">
		<div class="page">
			<global-header title="下线列表" @back="other.isShow = false" />
			<van-field v-model="form.Name" label-width="0" placeholder="请输入下线用户名" />
			<main class="page-main bg-white">
				<div class="page-main" ref="scrollRef">
					<scroll-list v-model:loading="state.loading" v-model:refresh="state.refresh" :finished="state.finished"
						:length="list.length" @load="load">
						<template v-for="item in list">
							<ul class="text-[#888] mb-2 bg-white px-[15px]">
								<li class="flex justify-between items-center py-[10px]">
									<div>用户名</div>
									<div>{{ item.UserName }}</div>
								</li>
								<li class="flex justify-between items-center py-[10px]">
									<div>昵称</div>
									<div>{{ item.NickName }}</div>
								</li>
								<li class="flex justify-between items-center py-[10px]">
									<div>余额</div>
									<div>{{ formatCurrency(item.Coin) }}</div>
								</li>
								<li class="flex justify-between items-center py-[10px]">
									<div>盈亏</div>
									<div>{{ formatCurrency(item.AllWin) }}</div>
								</li>
								<li class="flex justify-between items-center py-[10px]">
									<div>流水</div>
									<div>{{ formatCurrency(item.AllAmount) }}</div>
								</li>
								<li class="flex justify-between items-center py-[10px]">
									<div>回水比例</div>
									<div>{{ item.BackWaterRate }} %</div>
								</li>
								<li class="flex justify-between items-center py-[10px]">
									<div>抽佣比例</div>
									<div>{{ item.CommissionRate }} %</div>
								</li>
							</ul>
						</template>
					</scroll-list>
				</div>
			</main>
		</div>
	</van-popup>
</template>
<script setup lang="ts">
import { useList } from "@/hooks/useList";
import { reqAgentUserList } from "@/api/user";
import { formatCurrency } from "@/utils/common";

const props = withDefaults(
	defineProps<{
		info: AgentMo | null;
	}>(),
	{
		info: null,
	}
);
interface Params {
	ParentId: number;
	Name?: string;
}
const emit = defineEmits<{
	update: [];
}>();

const form = reactive({
	Name: ""
});
const other = reactive({
	isShow: false
});

const getParams = () => {
	const params: Params = {
		ParentId: props.info?.UserId as number
	};
	if (form.Name) {
		params.Name = form.Name;
	}
	return params;
};

const { state, list, getData, search, refresh } = useList<AgentUserMo, Params>(
	reqAgentUserList,
	getParams
);

const open = () => {
	other.isShow = true;
	console.log("open")
	refresh();
};
defineExpose({
	open
});
</script>
